<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
</script>

<template>
  <div class="thanks">
    <div class="container">
      <div class="title">感谢您的来信</div>
      <div class="describe">我们将在1个工作日内与您联系</div>
      <div class="back" @click="router.push('/')">
        <span>返回首页 →</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.thanks {
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/images/home/banner/ending_background.png');
  background-size: cover; /* 自动裁剪图片至容器大小，保持宽高比 */
  background-repeat: no-repeat;
  background-position: center center; /* 将图片内容始终居中显示 */
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      font-family: 'SourceHanSansCN-Heavy';
      font-size: 56px;
      color: #fcfcfd;
      margin-bottom: 43px;
      white-space: nowrap;
    }
    .describe {
      font-family: 'SourceHanSansCN-Normal';
      font-size: 36px;
      color: #fcfcfd;
      margin-bottom: 88px;
      white-space: nowrap;
    }
    .back {
      width: 365px;
      height: 107px;
      background-color: #0db2f3;
      border: solid 2px #fcfcfd;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
      span {
        font-family: 'SourceHanSansCN-Normal';
        font-size: 36px;
        color: #fcfcfd;
        white-space: nowrap;
      }
      &:hover {
        cursor: pointer;
        background-color: #0d9ff3;
        transform: translateY(
          -2px
        ); /* 添加上升的动画效果，可以自行调整上升的距离 */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 添加更大的阴影效果，可以自行调整阴影的颜色和大小 */
      }
    }
  }
}
</style>
